import React, { useState, useEffect } from 'react';
import '../css/UserProfile.css';

const UserProfile = () => {
  const [userInfo, setUserInfo] = useState({
    name: '',
    age: '',
    condition: '',
  });

  // 初始化时读取保存的数据
  useEffect(() => {
    const saved = localStorage.getItem('userInfo');
    if (saved) {
      setUserInfo(JSON.parse(saved));
    }
  }, []);

  // 输入框变更
  const handleChange = (e) => {
    const { name, value } = e.target;
    setUserInfo((prev) => ({
      ...prev,
      [name]: value,
    }));
  };

  const handleSave = () => {
    localStorage.setItem('userInfo', JSON.stringify(userInfo));
    alert('用户资料已保存 ✅');
  };

  return (
    <div className="profile-container">
      <div className="profile-card">
        <h2>用户资料</h2>

        <label>姓名：</label>
        <input
          type="text"
          name="name"
          value={userInfo.name}
          onChange={handleChange}
          placeholder="请输入姓名"
        />

        <label>年龄：</label>
        <input
          type="number"
          name="age"
          value={userInfo.age}
          onChange={handleChange}
          placeholder="请输入年龄"
        />

        <label>病症：</label>
        <input
          type="text"
          name="condition"
          value={userInfo.condition}
          onChange={handleChange}
          placeholder="请输入诊断或病症"
        />

        <button onClick={handleSave}>保存资料</button>
      </div>
    </div>
  );
};

export default UserProfile;
